<template>
  <div class="module">
    <!--航行状态-->
    <MTitle ref="title" icon="hxzt" @search="initData"></MTitle>
    <MBox>
      <div class="content-box">
        <div class="bg">
          <div class="ul">
            <div class="item" v-for="(item,index) in indicator" :key="index">
              <span class="text">{{ item.text }}</span>
              <span class="num">{{ item.num || 0 }}</span>
            </div>
          </div>
        </div>
      </div>
    </MBox>
  </div>
</template>

<script>
import MTitle from '../base-com/m-title/m-title'
import MBox from '../base-com/m-box/m-box'
import { sailStatusStatistics } from '@/api/warnings'
import { shipMixin } from '../../mixins/mixin'

export default {
  mixins: [shipMixin],
  components: {
    MTitle,
    MBox
  },
  data() {
    return {
      textArr: ['在航告警数量', '在锚告警数量', '在港告警数量'],
      indicator: []
    }
  },
  methods: {
    shipChange() {
      this.initData();
    },
    initData() {
      const searchData = this.$refs.title.getForm()
      searchData.shipId = this.shipId
      sailStatusStatistics(searchData).then(res => {
        console.log(res)
        const result = res.result || []
        const arr = []
        result.map(item => {
          arr[item.id - 0] = {
            num: item.count,
            text: this.textArr[item.id - 0] || ''
          }
        })
        this.indicator = arr
      })
    }
  }
}
</script>

<style scoped lang="scss">
.content-box {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  .bg {
    width: 319px;
    height: 184px;
    background: url("./images/bg.png") no-repeat center;
    background-size: 100% 100%;
    margin-left: 20px;
    position: relative;
    .ul {
      position: absolute;
      top: 0;
      left: 0;
      .item {
        position: absolute;
        left: 184px;
        top: 85px;
        white-space: nowrap;
        display: flex;
        align-items: center;
        &:first-child {
          top: 19px;
          left: 170px;
        }
        &:last-child {
          left: 168px;
          top: 152px;
        }
        .text{
          color: #fff;
          font-size: 16px;
          line-height: 16px;
          padding-right: 17px;
        }
        .num{
          color: #FFC425;
          font-size: 14px;
          line-height: 16px;
        }
      }
    }
  }
}

</style>
